<template>
    <div class="my-banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <!-- 列表渲染 -->
            <van-swipe-item v-for="item in banners" :key="item.id">
                 <a :href="item.link" target="_blank"> 
                    <img :src="item.picUrl"  :alt="item.title">
                 </a>
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
// 做网络请求，导入api
import { bannerList , host } from '../api/index'
export default {
    data(){
        return {
            banners: [

            ]
        }
    },

    // 初始化
   async created(){
        await bannerList()
        .then(
            content=> {
                console.log('--->',content)
                let {code , result} = content;
                if(code == 200) {
                    // 映射新数组
                    this.banners = result.map((item,index)=>{
                         item.id = index;
                         item.picUrl = host+item.picUrl;
                        //  console.log(item.picUrl)
                         return item;
                    });
                }
            }
        )
    },
}
</script>
<style lang="less"> 
  .my-banner {
    margin-top: 10px;
    img {
        width: 100%;
        vertical-align: middle;
    }
  }
  .my-swipe .van-swipe-item {
    text-align: center;
  }
</style>